<template>
  <div class="infinite-list-wrapper" style="overflow: auto">
    <el-input class="input" :placeholder="'搜索'+ tabType + '类型'" :suffix-icon="Search" v-model="eventName"  @change="inputChange"></el-input>
    <el-empty v-if="props.eventData.total === 0" description="暂无数据" :image-size="50"></el-empty>
    <template v-for="(item, index) in eventData.records" :key="index">
       <span class="list-item" :class="{'list-item-active': active == index}"
             @click="itemClick(item,index)" tabindex="1" :title="item.name" >{{item.name}}</span>
    </template>
    <div class="pagination" v-if="props.eventData.total !== 0">
      <div class="page">
        <el-pagination
          :current-page="props.eventData.current"
          :page-size="eventData.size"
          :total="eventData.total"
          small layout="prev, pager, next"
          @current-change="getSearchList"
           />
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import type {PropType} from "vue";
export interface ISearchEvent {
  current:number,
  size:number,
  total:number,
  records:Array<any>
}
const eventName = ref()
const active = ref()
const props = defineProps({
  eventData: {
    type: Object as PropType<ISearchEvent>,
    required:true
  },
  tabType: {
    type: String,
    default:() => ''
  },
  name:{
    type:String,
    default:()=> ''
  }
})
watch(()=>props.name, (value, oldValue, onCleanup) => {
  eventName.value = value
})

watch(()=>props.eventData, (value, oldValue, onCleanup) => {
  active.value = -1
})
const emit = defineEmits(['onSearch','onPage','onInput'])
const itemClick = (item, index) => {
  active.value =  index
  emit('onSearch',{
    searchCode:item.code
  })
}

const getSearchList = (value)  => {
  emit('onPage', {
    currentPage:value
  })
}
const inputChange = (event) => {
  emit('onInput', {
    inputData:event
  })
}
</script>
<style>
.singleton-tooltip {
  transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
</style>
<style scoped lang="scss">
.infinite-list-wrapper {
  height:100%;
  text-align: center;
  .input {
    padding: 0px 8px 20px;
  }
}
.infinite-list-wrapper .list-item {
  line-height: 30px;
  background:white;
  color: #222222;
  font-size: 12px;
  display: block;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  -webkit-line-clamp: 1; // 超出多少行
  -webkit-box-orient: vertical;
  padding: 0px 6px;
}

 .list-item-active {
     background:#F7F8FA !important;
     color: #2B1DFF !important;
   }

  .pagination {
    bottom: 0px;
    padding-top: 8px;
    width: 100%;
    border-top: 1px solid #EDEFF4;
    background-color: white;
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  }
</style>
